<!--
 * @Author: yangzhiyu yangzhiyu@mail.pigcms.com
 * @Date: 2024-03-28 20:50:17
 * @LastEditors: yangzhiyu yangzhiyu@mail.pigcms.com
 * @LastEditTime: 2024-03-29 11:19:04
 * @FilePath: \fe_user_pc\src\views\shotstack\MuseMixedCut\MixedCutPreview\components\Loding.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
/**
 * 混剪loding组件
 */
import { ref, onMounted, onUnmounted, watch } from 'vue';
import navBack from "../../components/navBack.vue";
import { useRouter, useRoute } from "vue-router";
import utils from "@/common/utils/utils.js";

// 可编辑头部
import EditableHead from '@/views/shotstack/MuseMixedCut/components/EditableHead.vue'
const router = useRouter()
const route = useRoute();

// 可编辑标题
const titleText = ref('混剪预览')
// 假设这是你要循环展示的数据
const items = ref([
    '4组及以上的镜头组,可有效提升作品量',
    '单个镜头组的素材时长达到2min,可有效提升作品量',
    '拍摄时,让镜头/主体动起来可以有效提升作品量',
    '第一个镜头组放最吸引人的素材,可有效提示视频停留时长',
    '可以通过导入多收「自定义音乐」, 提升音乐的丰富度'
]);
// 当前显示的数组索引
const currentIndex = ref(0);

// 当前显示的数据
const currentVisibleItem = ref(items.value[currentIndex.value]);
// 返回上一页  -------这里要改
const backClick = () => {
    router.push(`/mixedCutCreat?id=${route.query.id}&type=${route.query.type}&viewType=${route.query.viewType}`);
}
// 初始化定时器
onMounted(() => {
    const timer = setInterval(() => {
        currentIndex.value = (currentIndex.value + 1) % items.value.length;
        currentVisibleItem.value = items.value[currentIndex.value];
    }, 3000);

    // 清除定时器
    onUnmounted(() => {
        clearInterval(timer);
    });
});
</script>

<template>
    <div class="Loding">
        <navBack @backClick="backClick" :contentConfig="{
            title: '混剪项目2024/3/28',
            isShow: true
        }" :leftConfig="{
            isShow: true,
            isShowEllipsis: false,

        }">
            <template #content_text>
                <EditableHead :titleText="titleText" @changeTitle="titleText = $event"></EditableHead>
            </template>
        </navBack>
        <!-- <img src="../static/one.png" alt=""> -->
        <img :src="utils.staticPath + 'images/workAi/shotstack/video_template_success.png'" alt="">
        <h2>正在生成中, 请稍等...</h2>
        <span class="title" ref="displayItem">{{ currentVisibleItem }}</span>
        <a-spin :indicator="indicator" style=" position: absolute;
            top: 70%;
            left: 50%;
            transform: translate(-50%,-50%);" />
    </div>
</template>



<style lang="less" scoped>
.Loding {
    height: 100vh;
    width: 100vw;
    position: relative;

    img {
        position: absolute;
        top: 44%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    h2 {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .title {
        position: absolute;
        top: 64%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        line-height: 20px;
        text-align: center;
    }
}
</style>